import './index.scss';
import React, { useEffect, useState } from 'react';
// import { getTemAll } from '../../../request';
// import Masonry from 'react-masonry-css';
// import { Button } from 'antd';
import Render from './components/Render'

function Index() {
  //   // 状态管理
  //   const [imageData, setImageData] = useState<Array<{ id: string; image: string }>>([]);
  //   const [currentPage, setCurrentPage] = useState<number>(1);
  //   const itemsPerPage = 15; // 每页显示15条数据

  //   useEffect(() => {
  //     // 获取数据，传递分页参数
  //     getTemAll(currentPage, itemsPerPage).then(res => {
  //       setImageData(res.data.list);
  //     });
  //   }, [currentPage]); // 当前页变化时重新获取数据

  //   // 计算当前页显示的数据
  //   const indexOfLastItem = currentPage * itemsPerPage;
  //   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  //   const currentItems = imageData.slice(indexOfFirstItem, indexOfLastItem);

  //   const totalPages = Math.ceil(imageData.length / itemsPerPage);

  //   const handlePageChange = (page: number) => {
  //     if (page >= 1 && page <= totalPages) {
  //       setCurrentPage(page);
  //     }
  //   };

  //   // key唯一
  //   const uniqueKeys = new Set();

  //   function generateUniqueKey(id: string) {
  //     let key = id;
  //     let count = 1;

  //     while (uniqueKeys.has(key)) {
  //       key = `${id}_${count}`;
  //       count += 1;
  //     }

  //     uniqueKeys.add(key);
  //     return key;
  //   }

  const [arr1, setArr1] = useState(['全部', '海报', '公众号', '抖音/小红书', '电商', 'PPT/办公', '印刷物料', 'H5', '社交生活', '视频', '插画元素', '视频特效']);
  const [arr2, setArr2] = useState(['推荐', '手机海报', '公众号首图', '小红书配图', '每日一签', '全屏海报', '邀请函', 'PPT16:9', '简历', '长图海报', '公众号次图', '主图图标', '商品主图', '名片', '长页H5', '直播贴片', '视频海报', '竖版直播背景', '横版海报', '竖版插画']);
  const [arr3, setArr3] = useState(['全部', '招聘求职', '宣传推广', '校园生活', '传统节气', '市场营销', '人事行政', '教育宣传', '节日节点', '社交生活', '话题咨询']);
  const [arr4, setArr4] = useState(['全部', '通用', '教育培训', '餐饮美食', '金融理财', '地产家居', '精神文明', '科技互联网', '医疗保健', '休闲娱乐', '旅游出行', '文体娱乐', '美容美发', '电商', '零售行业', '生活服务', '商业服务', '文化建设', '农林牧渔']);

  const [flag1, setFlag1] = useState(false); // arr1
  const [flag2, setFlag2] = useState(false); // arr2
  const [flag3, setFlag3] = useState(false); // arr3
  const [flag4, setFlag4] = useState(false); // arr4

  const [i1, setI1] = useState(Number(localStorage.getItem('i1')) || 0);
  const [i2, setI2] = useState(Number(localStorage.getItem('i2')) || 0);
  const [i3, setI3] = useState(Number(localStorage.getItem('i3')) || 0);
  const [i4, setI4] = useState(Number(localStorage.getItem('i4')) || 0);

  const huan1 = (index) => {
    setI1(index);
    localStorage.setItem('i1', index.toString());
  };

  const huan2 = (index) => {
    setI2(index);
    localStorage.setItem('i2', index.toString());
  };

  const huan3 = (index) => {
    setI3(index);
    localStorage.setItem('i3', index.toString());
  };

  const huan4 = (index) => {
    setI4(index);
    localStorage.setItem('i4', index.toString());
  };

  const handleToggleArr1 = () => {
    setFlag1(!flag1);
  };

  const handleToggleArr2 = () => {
    setFlag2(!flag2);
  };

  const handleToggleArr3 = () => {
    setFlag3(!flag3);
  };

  const handleToggleArr4 = () => {
    setFlag4(!flag4);
  };

  return (
    <div className='module-center'>
      <div className='nr'>
        分类:
        <b>
          {arr1.length > 12 ? (
            <>
              {arr1.slice(0, flag1 ? arr1.length : 12).map((item, index) => (
                <span
                  key={index}
                  onClick={() => huan1(index)}
                  className={index === i1 ? 'bg' : ''}
                >
                  {item}
                </span>
              ))}
              <button onClick={handleToggleArr1}>
                {flag1 ? '收起' : '更多'}
              </button>
            </>
          ) : (
            arr1.map((item, index) => (
              <span
                key={index}
                onClick={() => huan1(index)}
                className={index === i1 ? 'bg' : ''}
              >
                {item}
              </span>
            ))
          )}
        </b>
      </div>

      <div className='nr'>
        场景:
        <b>
          {arr2.length > 12 ? (
            <>
              {arr2.slice(0, flag2 ? arr2.length : 12).map((item, index) => (
                <span
                  key={index}
                  onClick={() => huan2(index)}
                  className={index === i2 ? 'bg' : ''}
                >
                  {item}
                </span>
              ))}
              <button onClick={handleToggleArr2}>
                {flag2 ? '收起' : '更多'}
              </button>
            </>
          ) : (
            arr2.map((item, index) => (
              <span
                key={index}
                onClick={() => huan2(index)}
                className={index === i2 ? 'bg' : ''}
              >
                {item}
              </span>
            ))
          )}
        </b>
      </div>

      <div className='nr'>
        标签:
        <b>
          {arr3.length > 12 ? (
            <>
              {arr3.slice(0, flag3 ? arr3.length : 12).map((item, index) => (
                <span
                  key={index}
                  onClick={() => huan3(index)}
                  className={index === i3 ? 'bg' : ''}
                >
                  {item}
                </span>
              ))}
              <button onClick={handleToggleArr3}>
                {flag3 ? '收起' : '更多'}
              </button>
            </>
          ) : (
            arr3.map((item, index) => (
              <span
                key={index}
                onClick={() => huan3(index)}
                className={index === i3 ? 'bg' : ''}
              >
                {item}
              </span>
            ))
          )}
        </b>
      </div>

      <div className='nr'>
        领域:
        <b>
          {arr4.length > 12 ? (
            <>
              {arr4.slice(0, flag4 ? arr4.length : 12).map((item, index) => (
                <span
                  key={index}
                  onClick={() => huan4(index)}
                  className={index === i4 ? 'bg' : ''}
                >
                  {item}
                </span>
              ))}
              <button onClick={handleToggleArr4}>
                {flag4 ? '收起' : '更多'}
              </button>
            </>
          ) : (
            arr4.map((item, index) => (
              <span
                key={index}
                onClick={() => huan4(index)}
                className={index === i4 ? 'bg' : ''}
              >
                {item}
              </span>
            ))
          )}
        </b>
      </div>



      <Render></Render>


    </div>
  );
}

export default Index;